<template>
    <div class="app-container">
        <div class="filter-container">
            <el-form inline>
                <el-form-item label="日期">
                    <el-date-picker v-model="searchQuery.startDate" show-today :default-value="new Date()" type="date" placeholder="选择起始时间" class="w-140" />
                    <el-button icon="el-icon-arrow-up" @click="changeDate('-')">上周</el-button>
                    <el-button icon="el-icon-arrow-down" style="margin-left:0;" @click="changeDate('+')">下周</el-button>
                </el-form-item>
                <el-form-item label="教室">
                    <el-select v-model="searchQuery.room" clearable placeholder="请选择教室" class="w-120">
                        <el-option v-for="item in rooms" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="教师">
                    <el-select v-model="searchQuery.teacher" placeholder="请选择教师" class="w-120">
                        <el-option v-for="item in teachers" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="班级">
                    <el-select v-model="searchQuery.class" clearable filterable placeholder="请选择班级" class="w-120">
                        <el-option v-for="item in classes" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="danger" icon="el-icon-plus" @click="arrangeAddVisible = true">排课</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button :type="showArrangeLog ? 'info' : 'warning'" icon="el-icon-view" @click="showArrangeLog = !showArrangeLog">{{ showArrangeLog ? '课程表' : '排课记录' }}</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div v-show="!showArrangeLog" class="table-container">
            <!-- 日期行 -->
            <el-row class="flex">
                <el-col :span="2" class="text-center">
                    <div class="font-bold">日期</div>
                    <div class="text-sm font-normal">时间</div>
                </el-col>
                <el-col v-for="(item, index) in dates" :key="index" :class="{'text-center': true, 'today': item.day == today}" :span="item.num > 0 ? 4 : 2">
                    <div class="front-bold">{{ item.week }}</div>
                    <div class="front-bold">{{ item.day == today ? '今天' : item.day }}</div>
                    <div class="text-sm font-normal">{{ item.num }}节</div>
                </el-col>
            </el-row>
            <!-- 时间行 -->
             <!-- 遍历不同的小时-->
            <el-row v-for="(item, index) in times" :key="index" class="flex">
                <el-col :span="2" class="text-center">
                    <div>{{ item.time }}</div>
                </el-col>
                <!-- 遍历每一个日期 -->
                <el-col v-for="(item2, index2) in item.days" :key="index2" :span="dates[index2].num > 0 ? 4 : 2" style="overflow: hidden;">
                    <!-- 遍历课程 -->
                    <div v-for="(item3, index3) in item2" :key="index3" :class="{'course-container': true, finish: item3.status}">
                        <p class="flex items-center my-0 nowrap"><i class="el-icon-timer mr-5" />{{ item3.time }}</p>
                        <p class="flex items-center my-0 nowrap"><i class="el-icon-school mr-5" />{{ item3.class }}</p>
                        <p class="flex items-center my-0 nowrap"><i class="el-icon-s-custom mr-5" />{{ item3.teacher }}</p>
                        <p class="flex items-center my-0 nowrap"><i class="el-icon-location-outline mr-5" />{{ item3.room }}</p>
                        <p class="flex items-center flex-reverse mt-5 mb-0 nowrap">
                            <i v-if="item3.status == 0" class="handle-btn el-icon-circle-close mr-5" @click="handleDelete(item3.id)" />
                            <i class="handle-btn el-icon-view mr-5" @click="$refs.arrangeSign.show(item3.id)" />
                            <!-- <i v-if="item3.status == 0" class="handle-btn el-icon-edit-outline mr-5" /> -->
                        </p>
                    </div>
                </el-col>
            </el-row>
        </div>
        <arrange-add :visible.sync="arrangeAddVisible" @success="search()" />
        <!-- 排课记录 -->
        <arrange-logs v-if="showArrangeLog" />
        <!-- 签到记录 -->
        <arrange-sign ref="arrangeSign" @signed="search()" />
    </div>
</template>
<script>
import roomApi from '@/api/room'
import classApi from '@/api/class'
import teacherApi from '@/api/teacher'
import courseArrangeApi from '@/api/course-arrange'
import dayjs from 'dayjs'

import arrangeAdd from './components/arrange-add.vue'
import arrangeLogs from './components/arrange-logs.vue'
import arrangeSign from './components/arrange-sign.vue'

export default {
    name: 'CourseArrange',
    components: { arrangeAdd, arrangeLogs, arrangeSign },
    data() {
        return {
            arrangeAddVisible: false,
            showArrangeLog: false,
            arrangeLogs: [],
            today: dayjs().format('MM/DD'),
            teachers: [],
            rooms: [],
            classes: [],
            searchQuery: {
                startDate: dayjs().startOf('week').format('YYYY-MM-DD'), // 直接使用startOf获取本周一
                room: '',
                teacher: '',
                course: ''
            },
            dates: [],
            times: []
        }
    },
    created() {
        this.search()
        roomApi.list().then(res => { this.rooms = res.data })
        classApi.list().then(res => { this.classes = res.data })
        teacherApi.list().then(res => { this.teachers = res.data })
    },
    methods: {
        search() {
            courseArrangeApi.list(this.searchQuery).then(res => {
                this.dates = res.data.dates
                this.times = res.data.times
            })
        },
        changeDate(type) {
            // 如果type是+，则日期加7天，否则减7天
            const date = dayjs(this.searchQuery.startDate).add(type === '+' ? 7 : -7, 'day')
            this.searchQuery.startDate = date.format('YYYY-MM-DD')
            this.search()
        },
        handleDelete(id) {
            // 确认
            this.$confirm('确定删除该排课吗？', '提示').then(() => {
                courseArrangeApi.delete(id).then(res => {
                    this.search()
                })
            }).catch(() => {})
        },
        showArrangeSign(id) {
            console.log(this.$refs)
        }
    }
}
</script>
<style lang="scss" scoped>
$border-color: #e4e7ed;
.el-row:first-child {
    border-top: 1px solid $border-color;
}
.el-row {
    border-bottom: 1px solid $border-color;
}

.el-col:first-child {
    border-left: 1px solid $border-color;
}
.el-col {
    padding: 10px;
    border-right: 1px solid $border-color;
}
.today{
    color: green;
    font-weight: bold;
}
.course-container:parent{padding: 0;}

.course-container {
    color: green;
    background: #ddd;
    &.finish {
        color: white;
        background: #ccc;
    }
    position:relative;
    border:1px solid #aaa;
    border-radius: 2px;
    padding: 1px;
    margin-bottom: 10px;
    &:last-child { margin-bottom: 0;}
    font-size: 14px;

    .handle-btn {
        cursor: pointer;
        &:hover { color: red;}
    }
}
</style>
